<template>
  <div id="app">
    <transition name="fade">
      <router-view class="app-view"/>
    </transition>
  </div>
</template>
<style lang="stylus">
*{
  box-sizing border-box
  padding 0
  margin 0
  -webkit-overflow-scrolling:touch;
  outline none
}
html,body{
  width 100%
  height 100%
  button,input{
        background transparent
        border 0
        outline none 
  }
  input[type="text"]{
    -webkit-user-select:text !important;
    user-select:text !important;
  }
  .cube-dialog-btn_highlight{
    color:#5393fc;
  }
  .cube-input{
    &.cube-input_active:after{
        border:0;
    }
  }
}
#app{
  font-family 'Avenir', Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  color #2c3e50
  width 100%
  height 100%
  position relative
  overflow hidden
  .app-view{
    width 100%
    height 100%
  }
  .fade-enter,.fade-leave-to{
      opacity: 0;
  }
  .fade-enter-to,.fade-leave{
      opacity: 1;
  }
  .fade-enter-active,.fade-leave-active{
      transition: all 0.3s;
  }
  
  .slide-forward-enter {
      transform: translateX(100%);
  }
  .slide-forward-enter-active {
      transition: all 0.3s ease-in-out;
  }
  .slide-forward-leave-active {
      transform: translateX(-100%);
      transition: all  0.3s ease-in-out;
  }


  .slide-back-enter {
      transform: translateX(-100%);
  }
  .slide-back-enter-active {
      transition: all 0.3s ease-in-out;
  }
  .slide-back-leave-active {
      transform: translateX(100%);
      transition: all  0.3s ease-in-out;
  }
}
</style>

<script>
export default {
    data(){
        return {
          transitionName:'slide-back'
        }
    },
    watch: {  
      $route(to, from) {  
        if(to.meta.index < from.meta.index) {
          this.transitionName = "slide-back"
        } else {
          this.transitionName = "slide-forward"
        }
      }  
  }
}
</script>

